﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<fmt:setBundle basename="ApplicationMessage" />

<!DOCTYPE html>
<html lang="zh-CN">
<head>

  <%@ include file="/WEB-INF/include/meta.jsp"%>
  <%@ include file="/WEB-INF/include/css.jsp"%>

</head>

<body class="ihg-theme-draft">

  <%@ include file="/WEB-INF/include/header.jsp"%>
  <jsp:include page="/WEB-INF/include/submenu-session.jsp">
    <jsp:param name="currentUrl" value="${ctx.host}/sessions/${session.id}"/>
  </jsp:include>
  
  <div class="container-fluid ihg-container has-ihg-sidemenu">

    <div class="ihg-breadcrumb">
      <ol class="breadcrumb border-breadcrumb">
        <li class="active">Session &nbsp;&nbsp;-&nbsp;&nbsp;Preparation&nbsp;Home</li>
      </ol>
      <div class="pull-right">
        <a href="${ctx.host}/${session.sessionStatus.name}-sessions">Go Back List</a>
      </div>
    </div>
    
    <div class="ihg-content-layout has-operation">
      
      <div class="row">
        <div class="form-horizontal ihg-form" id="meeting">
          <div class="ihg-form-title clearfix" style="margin: 0 15px 15px 15px;">
            <h5>Meeting</h5>
          </div>
          
          <div class="col-xs-5">
            <c:set var="assessorOrientationSessionMeeting" value="${sessionMeetings['Orientation Call']['ADMIN_ASSESSORS']}" />
            
            <div class="panel panel-default ihg-panel">
              <div class="panel-heading">
                <span class="panel-titles text-success" style="font-size: 13px; font-weight: bold;"><i class="glyphicon glyphicon-th-large" style="top: 2px;"></i>&nbsp;&nbsp;ASSESSOR ORIENTATION CALL</span>
                <div class="pull-right">
                  <a href="${ctx.host}/sessions/${session.id}/meetings/${assessorOrientationSessionMeeting.id}/edit?type=orientation" data-target="#session-meeting-edit" data-toggle="modal">Edit</a>
                </div>
              </div>
              
              <div class="panel-body" style="padding: 15px 0;">
                <div class="form-horizontal ihg-form">
                
                  <div class="form-group ihg-form-group">
                    <label class="control-label col-xs-3">Date :</label>
                    <div class="col-xs-7">
                      <p class="form-control-static">
                        <fmt:formatDate value="${assessorOrientationSessionMeeting.startTime}" pattern="yyyy-MM-dd HH:mm"/>&nbsp;&nbsp;~&nbsp;&nbsp;<fmt:formatDate value="${assessorOrientationSessionMeeting.endTime}" pattern="yyyy-MM-dd HH:mm"/>
                      </p>
                    </div>
                  </div>
                  
                  <div class="form-group ihg-form-group">
                    <label class="control-label col-xs-3">Meeting Room:</label>
                    <div class="col-xs-6">
                      <p class="form-control-static"><a href="${assessorOrientationSessionMeeting.conferenceRoom.url}" target="_blank">${assessorOrientationSessionMeeting.conferenceRoom.name}</a></p>
                    </div>
                  </div>
                  
                  <div class="form-group ihg-form-group">
                    <label class="control-label col-xs-3">Access Code:</label>
                    <div class="col-xs-3">
                      <p class="form-control-static">${assessorOrientationSessionMeeting.conferenceRoom.account} #</p>
                    </div>
                    <label class="control-label col-xs-3">Meeting Host :</label>
                    <div class="col-xs-3">
                      <p class="form-control-static">${persist.getSessionHost(assessorOrientationSessionMeeting.owner).name}</p>
                    </div>
                  </div>
                  
                  <div class="form-group ihg-form-group">
                    <label class="control-label col-xs-3">Assessor :</label>
                    <div class="col-xs-9">
                      <p class="form-control-static clearfix">
                        <c:forEach var="assessor" items="${assessors}">
                          <span class="label label-default pull-left" style="margin: 0 5px 10px 0;">${assessor.name}</span>
                        </c:forEach>
                      </p>
                    </div>
                  </div>
                  
                </div>
              </div>
            </div>
            
            
            <div class="panel panel-default ihg-panel">
            
              <c:set var="assessorQACallSessionMeeting" value="${sessionMeetings['Q&A Call']['ADMIN_ASSESSORS']}" />
            
              <div class="panel-heading">
                <span class="panel-titles text-success" style="font-size: 13px; font-weight: bold;"><i class="glyphicon glyphicon-th-large" style="top: 2px;"></i>&nbsp;&nbsp;ASSESSOR Q&A</span>
                <div class="pull-right">
                  <a href="${ctx.host}/sessions/${session.id}/meetings/${assessorQACallSessionMeeting.id}/edit?type=qa" data-target="#session-meeting-edit" data-toggle="modal">Edit</a>
                </div>
              </div>
              
              <div class="panel-body" style="padding: 15px 0;">
                <div class="form-horizontal ihg-form">
                  <div class="form-group ihg-form-group">
                    <label class="control-label col-xs-3">Date :</label>
                    <div class="col-xs-7">
                      <p class="form-control-static">
                        <fmt:formatDate value="${assessorQACallSessionMeeting.startTime}" pattern="yyyy-MM-dd HH:mm"/>&nbsp;&nbsp;~&nbsp;&nbsp;<fmt:formatDate value="${assessorQACallSessionMeeting.endTime}" pattern="yyyy-MM-dd HH:mm"/>
                      </p>
                    </div>
                  </div>
                  
                  <div class="form-group ihg-form-group">
                    <label class="control-label col-xs-3">Zoom Link:</label>
                    <div class="col-xs-6">
                      <p class="form-control-static"><a href="${assessorQACallSessionMeeting.conferenceRoom.url}"  target="_blank">Link</a></p>
                    </div>
                  </div>
                  
                  <div class="form-group ihg-form-group">
                    <label class="control-label col-xs-3">Zoom Account:</label>
                    <div class="col-xs-3">
                      <p class="form-control-static">${assessorQACallSessionMeeting.conferenceRoom.account}</p>
                    </div>
                    <label class="control-label col-xs-3">Zoom Password:</label>
                    <div class="col-xs-3">
                      <p class="form-control-static">${assessorQACallSessionMeeting.conferenceRoom.password}</p>
                    </div>
                  </div>
              
                  <div class="form-group ihg-form-group">
                    <label class="control-label col-xs-3">Meeting Host :</label>
                    <div class="col-xs-3">
                      <p class="form-control-static">${persist.getSessionHost(assessorQACallSessionMeeting.owner).name}</p>
                    </div>
                  </div>
                  
                  <div class="form-group ihg-form-group">
                    <label class="control-label col-xs-3">Assessor :</label>
                    <div class="col-xs-9">
                      <p class="form-control-static clearfix">
                        <c:forEach var="assessor" items="${assessors}">
                          <span class="label label-default pull-left" style="margin: 0 5px 10px 0;">${assessor.name}</span>
                        </c:forEach>
                      </p>
                    </div>
                  </div>
                  
                </div>
              </div>
            </div>
            
            <c:if test="${!session.couldSendEmail}">
              <div class="panel panel-default ihg-panel">
                <div class="panel-heading">
                  <span class="panel-titles text-success" style="font-size: 13px; font-weight: bold;"><i class="glyphicon glyphicon-th-large" style="top: 2px;"></i>&nbsp;&nbsp;OPEN EMAIL NOTICE</span>
                </div>
                
                <div class="panel-body" style="padding: 15px 30px; text-align: center;">
                  
                  <p style="margin-top: 10px; font-size:18px;" class="text-danger">When open email notice, system will auto send email to Assessor & Delegate.</p>
                  <a href="${ctx.host}/sessions/${session.id}/open-notice" data-target="#open-notice" data-toggle="modal" class="btn btn-success btn-shadow btn-shadow-success x-btn" style="margin-top:20px;">OPEN NOW</a>
                </div>
              </div>
            </c:if>
            
            
          </div>
          
          
          <div class="col-xs-5">
          
           <c:set var="delegateOrientationSessionMeeting" value="${sessionMeetings['Orientation Call']['ADMIN_DELEGATES']}" />
          
           <div class="panel panel-default ihg-panel">
            <div class="panel-heading">
              <span class="panel-titles text-success" style="font-size: 13px; font-weight: bold;"><i class="glyphicon glyphicon-th-large" style="top: 2px;"></i>&nbsp;&nbsp;DELEGATE ORIENTATION CALL</span>
              <div class="pull-right">
                <a href="${ctx.host}/sessions/${session.id}/meetings/${delegateOrientationSessionMeeting.id}/edit?type=orientation" data-target="#session-meeting-edit" data-toggle="modal">Edit</a>
              </div>
            </div>
            <div class="panel-body" style="padding: 15px 0;">
              <div class="form-horizontal ihg-form">
              
              
                <div class="form-group ihg-form-group">
                  <label class="control-label col-xs-3">Date :</label>
                  <div class="col-xs-7">
                    <p class="form-control-static">
                      <fmt:formatDate value="${delegateOrientationSessionMeeting.startTime}" pattern="yyyy-MM-dd HH:mm"/>&nbsp;&nbsp;~&nbsp;&nbsp;<fmt:formatDate value="${delegateOrientationSessionMeeting.endTime}" pattern="yyyy-MM-dd HH:mm"/>
                    </p>
                  </div>
                </div>
                
                <div class="form-group ihg-form-group">
                  <label class="control-label col-xs-3">Meeting Room:</label>
                  <div class="col-xs-6">
                    <p class="form-control-static"><a href="${delegateOrientationSessionMeeting.conferenceRoom.url}" target="_blank">${delegateOrientationSessionMeeting.conferenceRoom.name}</a></p>
                  </div>
                </div>
                
                <div class="form-group ihg-form-group">
                  <label class="control-label col-xs-3">Access Code:</label>
                  <div class="col-xs-3">
                    <p class="form-control-static">${delegateOrientationSessionMeeting.conferenceRoom.account} #</p>
                  </div>
                  <label class="control-label col-xs-3">Meeting Host :</label>
                  <div class="col-xs-3">
                    <p class="form-control-static">${persist.getSessionHost(delegateOrientationSessionMeeting.owner).name}</p>
                  </div>
                </div>
                
                <div class="form-group ihg-form-group">
                  <label class="control-label col-xs-3">Delegate :</label>
                  <div class="col-xs-9">
                    <p class="form-control-static clearfix">
                      <c:forEach var="delegate" items="${delegates}">
                        <span class="label label-default pull-left" style="margin: 0 5px 10px 0;">${delegate.name}</span>
                      </c:forEach>
                    </p>
                  </div>
                </div>
               </div>
              </div>
            </div>
            
            <c:set var="delegateQACallSessionMeeting" value="${sessionMeetings['Q&A Call']['ADMIN_DELEGATES']}" />
            
            <div class="panel panel-default ihg-panel">
              <div class="panel-heading">
                <span class="panel-titles text-success" style="font-size: 13px; font-weight: bold;"><i class="glyphicon glyphicon-th-large" style="top: 2px;"></i>&nbsp;&nbsp;DELEGATE Q&A</span>
                <div class="pull-right">
                <a href="${ctx.host}/sessions/${session.id}/meetings/${delegateQACallSessionMeeting.id}/edit?type=qa" data-target="#session-meeting-edit" data-toggle="modal">Edit</a>
              </div>
              </div>
              <div class="panel-body" style="padding: 15px 0;">
                <div class="form-horizontal ihg-form">
                
                  <div class="form-group ihg-form-group">
                    <label class="control-label col-xs-3">Date :</label>
                    <div class="col-xs-7">
                      <p class="form-control-static">
                        <fmt:formatDate value="${delegateQACallSessionMeeting.startTime}" pattern="yyyy-MM-dd HH:mm"/>&nbsp;&nbsp;~&nbsp;&nbsp;<fmt:formatDate value="${delegateQACallSessionMeeting.endTime}" pattern="yyyy-MM-dd HH:mm"/>
                      </p>
                    </div>
                  </div>
                  
                  <div class="form-group ihg-form-group">
                    <label class="control-label col-xs-3">Zoom Link:</label>
                    <div class="col-xs-6">
                      <p class="form-control-static"><a href="${delegateQACallSessionMeeting.conferenceRoom.url}" target="_blank">Link</a></p>
                    </div>
                  </div>
                  
                  <div class="form-group ihg-form-group">
                    <label class="control-label col-xs-3">Zoom Account:</label>
                    <div class="col-xs-3">
                      <p class="form-control-static">${delegateQACallSessionMeeting.conferenceRoom.account}</p>
                    </div>
                    <label class="control-label col-xs-3">Zoom Password:</label>
                    <div class="col-xs-3">
                      <p class="form-control-static">${delegateQACallSessionMeeting.conferenceRoom.password}</p>
                    </div>
                  </div>
              
                  <div class="form-group ihg-form-group">
                    <label class="control-label col-xs-3">Meeting Host :</label>
                    <div class="col-xs-3">
                      <p class="form-control-static">${persist.getSessionHost(delegateQACallSessionMeeting.owner).name}</p>
                    </div>
                  </div>
                  
                  <div class="form-group ihg-form-group">
                    <label class="control-label col-xs-3">Delegate :</label>
                    <div class="col-xs-9">
                      <p class="form-control-static clearfix">
                        <c:forEach var="delegate" items="${delegates}">
                          <span class="label label-default pull-left" style="margin: 0 5px 10px 0;">${delegate.name}</span>
                        </c:forEach>
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <div class="col-xs-2">
            <div class="panel panel-default ihg-panel operation-panel">
              <div class="panel-heading">
                <span class="panel-titles" style="font-size: 13px; font-weight: bold; color: #D88362;"><i class="glyphicon glyphicon-cog" style="top: 2px;"></i>&nbsp;&nbsp;MENU</span>
              </div>
              <div class="panel-body">
                <a href="#meeting" type="button" class="btn btn-link" style="padding-left: 5px;">Meeting</a>
                <a href="#progress" type="button" class="btn btn-link" style="padding-left: 5px;">Progress</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="row">
        
        <div class="form-horizontal ihg-form" id="progress">
          <div class="ihg-form-title clearfix" style="margin: 0 15px 15px 15px;">
            <h5>Progress</h5>
          </div>
         
           <div class="col-xs-7">
             
             <div class="panel panel-default ihg-panel">
               <div class="panel-heading">
                <span class="panel-titles text-success" style="font-size: 13px; font-weight: bold;"><i class="glyphicon glyphicon-th-large" style="top: 2px;"></i>&nbsp;&nbsp;Assessor Progress</span>
               </div>
               <div class="panel-body no-padding">
                 <table class="table table-hover ihg-table-table has-img-table" style="margin-bottom: 0px;">
                  <thead>
                    <tr>
                      <th class="text-center"></th>
                      <th class="text-center">WHO I KNOW</th>
                      <th class="text-center">Training Modules</th>
                      <th class="text-center">Test 1</th>
                      <th class="text-center">Test 2</th>
                      <th class="text-center">Certification</th>
                    </tr>
                  </thead>
                  <tbody>
                    <c:forEach var="assessor" items="${assessors}">
                      <c:set var="finalTest" value="${finalTestMap[assessor.idString]}" />
                      <tr>
                        <td>${assessor.name}</td>
                        <td class="text-center"><img src="${ctx.resource}/images/${assessorTasks['Who I Know'][assessor.idString].status.finish ? 'check' : 'error'}.png"></td>
                        <td class="text-center">
                          <%-- <img src="${ctx.resource}/images/${traingTasks[assessor.idString] eq 3 ? 'check' : 'error'}.png"> --%>
                          ${traingTasks[assessor.idString]}&nbsp;/&nbsp;3
                        </td>
                        <td class="text-center">
                          <c:choose>
                            <c:when test="${(not empty finalTest) and finalTest.finishOne}">
                              No.${finalTest.basicExerciseCount}&nbsp;,&nbsp;<fmt:formatNumber pattern="00%" value="${finalTest.getCorrectRateOne()}" />
                            </c:when>
                            <c:otherwise>
                              &nbsp;--&nbsp;
                            </c:otherwise>
                          </c:choose>
                        </td>
                        <td class="text-center">
                          <c:choose>
                            <c:when test="${(not empty finalTest) and finalTest.finishTwo}">
                              No.${finalTest.enhanceExerciseCount}&nbsp;,&nbsp;<fmt:formatNumber pattern="00%" value="${finalTest.getCorrectRateTwo()}" />
                            </c:when>
                            <c:otherwise>
                              &nbsp;--&nbsp;
                            </c:otherwise>
                          </c:choose>
                        </td>
                        <td class="text-center">
                          <c:choose>
                            <c:when test="${(not empty finalTest) and finalTest.pass}">
                              <c:choose>
                                <c:when test="${finalTest.passOne or finalTest.passTwo}">
                                  <img src="${ctx.resource}/images/check.png">
                                </c:when>
                                <c:otherwise>
                                  <img src="${ctx.resource}/images/warn.png">    
                                </c:otherwise>
                              </c:choose>                              
                            </c:when>
                            <c:otherwise>
                              <img src="${ctx.resource}/images/error.png">
                            </c:otherwise>
                          </c:choose>
                        </td>
                      </tr>
                    </c:forEach>
                  </tbody>
                </table>
               </div>
             </div>
           </div>
           
           <div class="col-xs-5">
             <div class="panel panel-default ihg-panel">
               <div class="panel-heading">
                <span class="panel-titles text-success" style="font-size: 13px; font-weight: bold;"><i class="glyphicon glyphicon-th-large" style="top: 2px;"></i>&nbsp;&nbsp;Delegate Progress</span>
               </div>
               <div class="panel-body no-padding">
                 <div class="panel-body no-padding">
                 <table class="table table-hover ihg-table-table has-img-table" style="margin-bottom: 0px;">
                  <thead>
                    <tr>
                      <th class="text-center"></th>
                      <th class="text-center">Career Workbook</th>
                      <th class="text-center">Wave Evaluation</th>
                      <th class="text-center">Swift Evaluation</th>
                      <th class="text-center">Delegate The Virtual Hotel</th>
                    </tr>
                  </thead>
                  <tbody>
                    <c:forEach var="delegate" items="${delegates}">
                      <tr>
                        <td>${delegate.name}</td>
                        <td class="text-center"><img src="${ctx.resource}/images/${delegateTasks['Career Path'][delegate.idString].status.finish ? 'check' : 'error'}.png"></td>
                        <td class="text-center"><img src="${ctx.resource}/images/${delegateTasks['Wave Evaluation'][delegate.idString].status.finish ? 'check' : 'error'}.png"></td>
                        <td class="text-center"><img src="${ctx.resource}/images/${delegateTasks['Swift Evaluation'][delegate.idString].status.finish ? 'check' : 'error'}.png"></td>
                        <td class="text-center"><img src="${ctx.resource}/images/${delegateTasks['Delegate The Virtual Hotel'][delegate.idString].status.finish ? 'check' : 'error'}.png"></td>
                      </tr>
                    </c:forEach>
                  </tbody>
                </table>
               </div>
               </div>
             </div>
           </div>
        </div>
      </div>
      
    </div>
  </div>

  <%@ include file="/WEB-INF/include/footer.jsp"%>
  <%@ include file="/WEB-INF/include/script.jsp"%>
  <d:resource root="${ctx.resource}/build" type="script" src="js/page/session/preparation/home/session-preparation-home.js" />
  <script type="text/javascript">
    require([ 'page/session/preparation/home/session-preparation-home'], function (page) {
      page.init();
    })
  </script>

</body>
</html>